<template>
	<view class="container">
	  <!-- 搜索区域 -->
	  <view class="search-section">
		<view class="search-box">
		  <uni-search-bar
			v-model="searchText"
			placeholder="搜索专利概念（如：人工智能、新能源...）"
			radius="100"
			@input="handleSearch"
			@confirm="handleSearch"
		  />
		</view>
	  </view>
  
	  <!-- 概念列表 -->
	  <view class="concept-list">
		<view class="section-title">
		  <text class="title">{{ searchText ? '搜索结果' : '热门概念' }}</text>
		</view>
		<view 
		  class="concept-item"
		  v-for="item in currentList"
		  :key="item.id"
		  @tap="handleConceptClick(item)"
		>
		  <view class="concept-header">
			<view class="left">
			  <text class="name">{{ item.name }}</text>
			  <text class="desc">{{ item.description }}</text>
			</view>
		  </view>
		  <view class="concept-footer">
			<text class="companies">相关公司：{{ item.companies }}家</text>
		  </view>
		</view>
	  </view>
	</view>
  </template>
  
  <script>
  export default {
	data() {
	  return {
		searchText: '',
		conceptList: [], // 热门概念列表
		searchResults: [], // 搜索结果列表
		loading: false,
		searchTimer: null // 添加定时器
	  }
	},
	
	computed: {
	  currentList() {
		return this.searchText ? this.searchResults : this.conceptList
	  }
	},
	
	onLoad() {
	  this.getHotConcepts()
	},
	
	methods: {
	  // 获取热门概念
	  async getHotConcepts() {
		console.log('================ 获取热门概念 ================')
		try {
		  this.loading = true
		  console.log('开始调用云函数...')
		  
		  const res = await uniCloud.callFunction({
			name: 'concept',
			data: {
			  action: 'getHotConcepts'
			}
		  })
		  
		  console.log('云函数返回结果:', res)
		  
		  if(res.result.code === 200) {
			console.log('获取成功:', res.result.data)
			this.conceptList = res.result.data.list
		  } else {
			console.error('获取失败:', res.result.msg)
			uni.showToast({
			  title: res.result.msg,
			  icon: 'none'
			})
		  }
		  
		} catch(e) {
		  console.error('获取热门概念异常:', e)
		  uni.showToast({
			title: '获取数据失败',
			icon: 'none'
		  })
		} finally {
		  this.loading = false
		  console.log('==========================================')
		}
	  },
	  
	  // 搜索处理
	  async handleSearch(e) {
		console.log('================ 搜索概念 ================')
		try {
		  const value = typeof e === 'string' ? e : e.value
		  console.log('搜索事件对象:', e)
		  console.log('搜索关键词:', value)
		  
		  // 清除之前的定时器
		  if(this.searchTimer) {
			clearTimeout(this.searchTimer)
		  }
		  
		  if(!value) {
			console.log('关键词为空,清空搜索结果')
			this.searchResults = []
			return
		  }
		  
		  // 设置300ms的防抖
		  this.searchTimer = setTimeout(async () => {
			console.log('准备调用云函数,关键词:', value)
			const res = await uniCloud.callFunction({
			  name: 'concept',
			  data: {
				action: 'searchConcepts',
				params: {
				  keyword: value
				}
			  }
			})
			
			console.log('云函数返回结果:', res)
			
			if(res.result.code === 200) {
			  console.log('搜索成功,结果:', res.result.data.list)
			  this.searchResults = res.result.data.list
			} else {
			  console.error('搜索失败:', res.result.msg)
			}
		  }, 300)
		  
		} catch(e) {
		  console.error('搜索异常:', e)
		  uni.showToast({
			title: '搜索失败',
			icon: 'none'
		  })
		} finally {
		  console.log('==========================================')
		}
	  },
	  
	  handleConceptClick(concept) {
		console.log('点击概念:', concept)
		uni.navigateTo({
		  url: `/pages/concept/detail?id=${concept.id}`
		})
	  }
	}
  }
  </script>
  
  <style lang="scss">
  .container {
	padding: 30rpx;
	background: #f5f5f5;
  }
  
  .search-section {
	background: #fff;
	padding: 30rpx;
	border-radius: 12rpx;
	margin-bottom: 30rpx;
  
	.hot-tags {
	  margin-top: 20rpx;
	  display: flex;
	  align-items: center;
	  
	  .label {
		font-size: 24rpx;
		color: #999;
	  }
	  
	  .tag-list {
		flex: 1;
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
		
		.tag {
		  font-size: 24rpx;
		  color: #666;
		  padding: 8rpx 24rpx;
		  background: #f5f5f5;
		  border-radius: 100rpx;
		}
	  }
	}
  }
  
  .concept-list {
	background: #fff;
	border-radius: 12rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
  
	.concept-item {
	  padding: 30rpx;
	  border: 1px solid #eee;
	  border-radius: 8rpx;
	  margin-bottom: 20rpx;
  
	  .concept-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 20rpx;
  
		.left {
		  .name {
			font-size: 32rpx;
			font-weight: bold;
		  }
		  .desc {
			font-size: 24rpx;
			color: #666;
			margin-top: 10rpx;
		  }
		}
	  }
  
	  .concept-footer {
		display: flex;
		justify-content: space-between;
		font-size: 24rpx;
		color: #999;
	  }
	}
  }
  
  .section-title {
	margin-bottom: 30rpx;
	.title {
	  font-size: 32rpx;
	  font-weight: bold;
	}
  }
  </style>